<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增食品</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
    <link rel="stylesheet" href="../global.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
</head>
<style>
    .van-cell__value {
        overflow: initial;
    }
</style>
<body>
<!--<div class="bg"></div>-->
<div id="app">
    <van-row>
        <van-col span="24">
            <van-nav-bar
                    title="套餐新增/编辑"
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"
            >
                <template #right>
                    <van-button style="margin: 8px 0;border-radius: 4px" size="small" square
                                color="linear-gradient(to right, #4bb0ff, #6149f6)" block>保存
                    </van-button>
                </template>
            </van-nav-bar>
        </van-col>
        <van-col span="24">
            <div class="box"></div>
        </van-col>
        <van-col span="24">
            <van-form @submit="onSubmit">

                <div>
                    <van-field
                            v-model="username"
                            name="套餐名字"
                            label="套餐名字"
                            placeholder="请输入套餐名字"
                            :rules="[{ required: true, message: '请填写食物名称' }]"
                    ></van-field>
                    <van-field
                            v-model="message"
                            rows="2"
                            autosize
                            label="套餐描述"
                            type="textarea"
                            maxlength="50"
                            placeholder="请输入套餐描述"
                            show-word-limit
                    ></van-field>
                    <van-field name="uploader" label="文件上传">
                        <template #input>
                            <van-uploader v-model="uploader"/>
                        </template>
                    </van-field>
                    <van-cell-group>
                        <van-field
                                v-model="value1"
                                label="米饭"
                                placeholder="请输入"
                        >
                            <template #button>
                                <van-icon color="#1989fa" name="add-o" size="18" @click="showPopup"></van-icon>
                            </template>
                        </van-field>
                    </van-cell-group>
                    <van-cell-group>
                        <van-field
                                v-model="value1"
                                label="肉"
                                placeholder="请输入"
                        >
                            <template #button>
                                <van-icon color="#1989fa" name="delete" size="18"></van-icon>
                            </template>
                        </van-field>
                    </van-cell-group>
                </div>
                <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
                    <p class="p-3 border-bottom">新增表单</p>
                    <van-field
                            v-model="username"
                            name="单位名称"
                            label="单位名称"
                            placeholder="请输入单位名称"
                    ></van-field>
                    <van-field
                            v-model="username"
                            name="消耗的热量"
                            label="消耗的热量"
                            placeholder="请输入消耗的热量"
                    ></van-field>
                    <div class="pl-3 pr-3 mt-2">
                        <van-button style="border-radius: 4px" square
                                    color="linear-gradient(to right, #4bb0ff, #6149f6)" block>保存
                        </van-button>
                    </div>

                </van-popup>
            </van-form>
        </van-col>
    </van-row>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                username: '',
                password: '',
                value: '',
                columns: ['个', '份', '瓶'],
                showPicker: false,
                uploader: [{url: 'https://img.yzcdn.cn/vant/leaf.jpg'}],
                checkbox: false,
                checkboxGroup: [],
                message: '',
                value1: '',
                show: false,
            };
        },
        methods: {
            onClickLeft() {
                Toast('返回');
            },
            onSubmit(values) {
                console.log('submit', values);
            },
            onConfirm(value) {
                this.value = value;
                this.showPicker = false;
            },
            showPopup() {
                this.show = true;
            },
        },
    });
</script>
</html>